<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src='../../dist/avalon.js'></script>
        <script>
            avalon.component('ms-tabs', {
                template: '<div><p>它有{{@num}}个面板</p><slot name="tab"/></div>',
                defaults: {
                    num: 3
                }
            })
            vm = avalon.define({
                $id: 'widget1'
            })
        </script>
    </head>
    <body>
        <div ms-controller='widget1' >
            <xmp :widget="{is:'ms-tabs'}">
                <div slot="tab">面板1</div>
                <hr>
                <div slot="tab">面板2</div>
                <hr>
                <div slot="tab">面板3</div>
                <hr>
            </xmp>
        </div>
    </body>
</html>
